Vue.component('todo-list', {
    template: `

    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" @key>
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <li v-for="(item,index) in pList" :key="item.id" :class="{ completed: item.done,editing:activeItemId==item.id }">
                <div class="view">
                    <input class="toggle" type="checkbox" @click="itemChangeStatus(item.id)" :checked="item.done">
                    <label @dblclick="itemShowEditBox(item.id)">{{ item.name }}</label>
                    <button class="destroy" @click="itemDelete(item.id)"></button>
                </div>
                <input class="edit" :value="item.name" @keyup.enter="itemHideEditBox($event,item.id)">
            </li>
        </ul>
    </section>    

    `,
    data() {
        return {
            msg: '测试信息',
            activeItemId: -1
        }
    },
    props: ['pList'],
    methods: {
        // 双击列表项，弹出编辑框
        itemShowEditBox(id) {
            console.log('列表项被双击了', id);
            this.activeItemId = id;
        },
        // 编辑框激活时回车进行隐藏和修改
        itemHideEditBox(e, id) {
            this.activeItemId = -1;
            // console.log(e.target.value);获取修改框的信息
            this.$emit('p-edit-list', e.target.value, id);
        },
        // 修改列表中项的完成状态
        itemChangeStatus(id) {
            this.$emit('p-change-item-status', id);
        },
        // 删除列表中的项
        itemDelete(id) {
            this.$emit('p-delete-item', id);
        }
    }

});